<template>
  <el-text tag="b" size="large" style="line-height: 50px; vertical-align: middle">物料信息</el-text>
  <el-descriptions class="info" column="5" size="large" border>
    <el-descriptions-item label-align="right" label="物料名称:">{{ inventoryVO.productName }}</el-descriptions-item>
    <el-descriptions-item label-align="right" label="物料编号:">{{ inventoryVO.code }}</el-descriptions-item>
    <el-descriptions-item label-align="right" label="规格型号:">{{ inventoryVO.model }}</el-descriptions-item>
    <el-descriptions-item label-align="right" label="归属仓库:">{{ inventoryVO.whName }}</el-descriptions-item>
    <el-descriptions-item label-align="right" label="物料分类:">{{ inventoryVO.categoryName }}</el-descriptions-item>
    <el-descriptions-item label-align="right" label="库存量:">{{ inventoryVO.total }}</el-descriptions-item>
    <el-descriptions-item label-align="right" label="可用量:">{{ inventoryVO.dispensable }}</el-descriptions-item>
    <el-descriptions-item label-align="right" label="冻结量:">{{ inventoryVO.frozen }}</el-descriptions-item>
    <el-descriptions-item label-align="right" label="单位:">{{ inventoryVO.unit }}</el-descriptions-item>
    <el-descriptions-item label-align="right" label=""></el-descriptions-item>
    <el-descriptions-item label-align="right" label="备注:" :span="5">{{ inventoryVO.remark }}</el-descriptions-item>
  </el-descriptions>
  <div class="inoutRecord">
    <el-text tag="b" size="large" style="line-height: 50px; vertical-align: middle">出入库记录</el-text>
    <el-segmented v-model="type" :options="options" :name="label" :value="value"></el-segmented>
  </div>
  <el-table :data="type === 'inbound' ? inboundList : outboundList" v-loading="loading" fit>
    <el-table-column align="center" label="序号" type="index" width="80"></el-table-column>
    <el-table-column align="center" label="出入库类型" prop="typeName" width="150"></el-table-column>
    <el-table-column align="center" label="数量" prop="quantity" width="100"></el-table-column>
    <el-table-column align="center" label="批次号" prop="batchNo"></el-table-column>
    <el-table-column align="center" label="客户名称" prop="vendorName"></el-table-column>
    <el-table-column align="center" label="质检结果" prop="qualityResultName"></el-table-column>
    <el-table-column align="center" label="操作人" prop="operatorName"></el-table-column>
    <el-table-column align="center" label="出入库时间" prop="createTime"></el-table-column>
    <template #empty>
      <el-empty></el-empty>
    </template>
  </el-table>
  <el-pagination v-if="type === 'inbound'" class="pagination" v-model:current-page="inPageInfo.page"
    v-model:page-size="inPageInfo.pageSize" :page-sizes="[10, 20, 30, 40]" size="small"
    layout="total, sizes, prev, pager, next, jumper" :total="inPageInfo.total" @change="handleChange" />
  <el-pagination v-if="type === 'outbound'" class="pagination" v-model:current-page="outPageInfo.page"
    v-model:page-size="outPageInfo.pageSize" :page-sizes="[10, 20, 30, 40]" size="small"
    layout="total, sizes, prev, pager, next, jumper" :total="outPageInfo.total" @change="handleChange" />
</template>
<script setup>
import { useRoute } from 'vue-router';
import { ref } from 'vue'
import { getInventoryDetail, getInboundDetail, getOutboundDetail } from '@/api/equipment/whm'
const route = useRoute();
let inventoryId = route.params?.id
const inPageInfo = ref({
  page: 1,
  pageSize: 10,
  total: 0
})
const outPageInfo = ref({
  page: 1,
  pageSize: 10,
  total: 0,
})
const inventoryVO = ref({})
const inboundList = ref([])
const outboundList = ref([])
const loading = ref(false)
async function init() {
  loading.value = true
  await getInventoryDetail(inventoryId, 1, 10).then(res => {
    console.log(res)
    inventoryVO.value = res.data.data.inventoryVO
    inboundList.value = res.data.data.inboundList.records
    inPageInfo.value.total = res.data.data.inboundList.total
    outboundList.value = res.data.data.outboundList.records
    outPageInfo.value.total = res.data.data.outboundList.total
    // console.log(res.data.data.outboundList)
    loading.value = false
  })
}
init()
const type = ref('inbound')
const options = [
  { value: 'inbound', label: '入库记录' },
  { value: 'outbound', label: '出库记录' }
]

function handleChange() {
  loading.value = true
  if (type.value === 'inbound') {
    getInboundDetail(inventoryVO.value.productId, inventoryVO.value.whId, inPageInfo.value.page, inPageInfo.value.pageSize).then(
      res => {
        inboundList.value = res.data.data.records
        inPageInfo.value.total = res.data.data.total
        console.log(res)
      })
  } else {
    getOutboundDetail(inventoryVO.value.productId, inventoryVO.value.whId, outPageInfo.value.page, outPageInfo.value.pageSize).then(
      res => {
        outboundList.value = res.data.data.records
        outPageInfo.value.total = res.data.data.total
        console.log(res)
      }
    )
  }
  loading.value = false
}
</script>
<style scoped lang="less">
.info {
  padding: 8px 16px;
}

.inoutRecord {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .el-segmented {
    padding-right: 20px;
    height: 32px;
  }

  :deep(.el-segmented__item-selected) {
    border-radius: 8px;
  }
}

:deep(th.el-table__cell) {
  background-color: var(--el-color-primary-light-7) !important;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
  margin-top: 20px;
  margin-right: 50px;
}
</style>